<template>
    <div class="Popularity">
        <div class="header">
            <h1>
                <span
                    v-for="(item, index) in header"
                    :key="index"
                    @click="change(item)"
                    :class="
                        order_by_desc === item.order_by_desc ? 'active' : ''
                    "
                    ><i>{{ item.text }}<b></b></i
                ></span>
            </h1>
            <h2 @click="huanyihuan" v-if="page <= 10">
                <img src="../assets/img/i_icon_hyh.png" alt="" />
                <span>换一换</span>
            </h2>
        </div>
        <ul class="list">
            <li
                v-for="(item, index) in list"
                :key="index"
                @click="
                    $router.push(
                        { path: '/Detial', query: { id: item.id } },
                        (onComplete) => {},
                        (onAbort) => {}
                    )
                "
            >
                <div>
                    <!-- <img
                        :src="
                            require(`../assets/img/i_phb_img_${index + 1}.png`)
                        "
                        alt=""
                    /> -->
                    <span>{{ item.num + 1 }}</span>
                </div>
                <span>{{ item.title }} </span>
                <i class="red" v-if="item.type == 2">
                    <b>热</b>
                </i>
                <i class="yellow" v-if="item.type == 1">
                    <b>新</b>
                </i>
            </li>
        </ul>
        <h1
            @click="
                $router.push(
                    { path: '/HotList', query: { id: order_by_desc } },
                    (onComplete) => {},
                    (onAbort) => {}
                )
            "
        >
            <img src="../assets/img/i_icon_more_red.png" alt="" />
        </h1>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'PopuLarity',
    props: {
        msg: String,
    },
    data() {
        return {
            order_by_desc: 'hot_score',
            page: 1,
            header: [
                {
                    text: '人气榜',
                    order_by_desc: 'hot_score',
                },
                {
                    text: '评论榜',
                    order_by_desc: 'comment_count',
                },
                {
                    text: '收藏榜',
                    order_by_desc: 'favorite_count',
                },
            ],
            list: [],
            num: 0,
        };
    },
    mounted() {
        this.getHotlList();
    },
    methods: {
        huanyihuan() {
            if (this.page >= 10) {
                this.page = 1;
                this.num = 0;
            }
            this.page = this.page + 1;
            this.getHotlList();
        },
        change(item) {
            this.order_by_desc = item.order_by_desc;
            this.page = 1;
            this.num = 0;
            this.getHotlList();
        },
        getHotlList() {
            axiosGet(
                'api/articles',
                {
                    page: this.page,
                    limit: 10,
                    order_by_desc: this.order_by_desc,
                },
                (res) => {
                    console.log(res);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.list = [];
                    res.data.list.map((item) => {
                        item.num = this.num++;
                        this.list.push(item);
                    });
                }
            );
        },
    },
};
</script>
<style scoped lang="scss">
.Popularity {
    padding: 17px 12px;
    box-shadow: 0 0 8px 4px #f5f5f5;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h1 {
        font-size: 18px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        float: left;

        span {
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            float: left;
            height: 36px;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
        }

        span:hover {
            color: #e60012;
        }

        .active {
            width: 84px;
            font-size: 22px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;

            b {
                position: absolute;
                width: 30px;
                height: 3px;
                background: #e60012;
                border-radius: 2px;
                left: 27px;
                bottom: -3px;
            }
        }
    }
    h2:hover {
        color: #e60012;
    }
    h2 {
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #a7a7a7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        img {
            margin-right: 1px;
        }
    }
}
.list {
    overflow: hidden;
    margin-top: 10px;
    li {
        height: 55px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        div {
            width: 36px;
            overflow: hidden;
            margin-left: 10px;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                font-style: italic;
                font-size: 18px;
            }
        }
        img {
            float: left;
        }
        span {
            font-size: 16px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #262626;
            display: block;
            width: 330px;
            cursor: pointer;
        }
        span:hover {
            color: #e60012;
        }
        i {
            width: 16px;
            height: 16px;
            border-radius: 2px;
            font-size: 12px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .red {
            background: #e60012;
        }
        .yellow {
            background: #fd6403;
        }
    }
}
h1 {
    cursor: pointer;
}
</style>
